<!--
 * @Author: TT-hzy
 * @Date: 2024-08-01 17:24:49
 * @LastEditors: TT-hzy
 * @LastEditTime: 2024-08-03 15:31:17
-->

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { EffectCards, Mousewheel, Pagination } from 'swiper/modules'
import 'swiper/less'
import 'swiper/less/effect-cards'
import 'swiper/less/navigation'
import type { CardsEffectOptions, Swiper as SwiperClass } from 'swiper/types'

const modules = [EffectCards, Pagination, Mousewheel]

const cardsEffect: CardsEffectOptions = {
  slideShadows: false,
  perSlideOffset: 10,
  perSlideRotate: 8
}
const slides = [
  {
    title: 'parent',
    src: '../assets/images/app-1.png'
  },
  {
    title: 'parent',

    src: '../assets/images/app_2.png'
  },
  {
    title: 'parent',
    src: '../assets/images/app_3.png'
  }
]

const getImgUrl = (url: string) => {
  return new URL(url, import.meta.url).href
}

const swiperRef = ref<SwiperClass>()
const onSwiper = (swiper: SwiperClass) => {
  swiperRef.value = swiper
}

function tapPrev() {
  swiperRef.value?.slidePrev()
  console.log('prev')
}
function tapNext() {
  swiperRef.value?.slideNext()
  console.log('next')
}
</script>
<template>
  <div class="row-center">
    <div class="fz-100" style="color: white" @click="tapPrev">s</div>
    <Swiper
      class="swiper-bg"
      :initial-slide="1"
      :effect="'cards'"
      :modules="modules"
      :mousewheel="true"
      :pagination="{
        clickable: true
      }"
      @swiper="onSwiper"
      :cards-effect="cardsEffect"
    >
      <SwiperSlide class="swiper-slide" v-for="(item, i) in slides" :key="i">
        <img :src="getImgUrl(item.src)" loading="lazy" />
      </SwiperSlide>
    </Swiper>
    <div class="fz-100" style="color: white" @click="tapNext">x</div>
  </div>
</template>

<style lang="less" scoped>
@imagwW: 40%;
.swiper-bg {
  width: @imagwW;
}

.swiper-slide {
  width: 100%;
  border-radius: 25px;
}
.swiper-slide img {
  width: 100%;
}
</style>
